<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

	<link rel="stylesheet" type="text/css" href="../resources/cola-ui/semantic.css">
	<link rel="stylesheet" type="text/css" href="../resources/cola-ui/cola.css">
	<link rel="stylesheet" type="text/css" href="../resources/demo.css">
	<title>Cola-UI</title>
	<script src="../resources/jquery-2.1.3.js"></script>
	<script src="../resources/cola-ui/3rd.js"></script>
	<script src="../resources/cola-ui/semantic.js"></script>
	<script src="../resources/cola-ui/cola.js"></script>
	<script src="../resources/cola-ui/i18n/zh/cola.js"></script>
	<script type="text/javascript">
		cola(function (model) {
			var items = [];
			for (var row = 1; row <= 40; row++) {
				var item = {
					selected: Math.random() > 0.5,
					bool: Math.random() > 0.5,
					bool2: Math.random() > 0.5,
					int: Math.round(Math.random() * 1000)
				};
				items.push(item);
				for (var col = 1; col <= 6; col++) {
					item["col" + col] = "item " + row + "," + col
				}
			}

			model.dataType({
				name: "Item",
				properties: {
					"int": {
						caption: "数字",
						dataType: "int"
					},
					"col1": {
						caption: "Col 1"
					},
					"col2": {
						caption: "Col 2"
					},
					"col3": {
						caption: "Col 3"
					},
					"col4": {
						caption: "Col 4"
					},
					"col5": {
						caption: "Col 5"
					}
				}
			});

			model.describe("items", "Item");
			model.set("items", items);

			model.action({
				add: function () {
					model.get("items").insert();
				},
				del: function (item) {
					item.remove();
				},
				upper: function (s) {
					return (s) ? s.toUpperCase() : "";
				},
				sum: function () {
					sum = 0;
					model.get("items").each(function (item) {
						sum += parseInt(item.get("int"));
					});
					return sum;
				}
			});
		});
	</script>
</head>

<body style="padding:0px;margin:8px;">

	<c-table bind="item in items" showFooter="true" sortable="true" height="80%">
		<template name="upper-template">
			<span c-bind="upper($default)"></span>
		</template>
		<template name="sum">
			<span c-bind="sum()"></span>
		</template>
		<template name="checkMark">
			<span c-display="$default">
				<i class="large green checkmark icon"></i>
			</span>
		</template>

		<column property="int" template="input-column" footerTemplate="sum"></column>
		<column bind=".col1" template="upper-template"></column>
		<column caption="Group">
			<column property="bool" align="center" template="checkMark"></column>
			<column property="bool2" align="center" template="checkMark"></column>
			<column bind="upper(item.col2)"></column>
			<column bind=".col3"></column>
		</column>
		<column bind=".col4"></column>
		<column bind=".col5"></column>
	</c-table>

</body>
</html>